<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数据列表</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f0f5;
      margin: 0;
      padding: 0;
    }
    .container {
      max-width: 800px;
      margin: 50px auto;
      padding: 20px;
      background-color: #fff;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      border-radius: 8px;
    }
    h2 {
      color: #333;
      text-align: center;
      margin-bottom: 30px;
    }
    button {
      display: block;
      width: 150px;
      margin: 0 auto 20px;
      padding: 10px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
    }
    button:hover {
      background-color: #45a049;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
    }
    th, td {
      padding: 12px;
      text-align: left;
      border-bottom: 1px solid #ddd;
    }
    th {
      background-color: #f2f2f2;
    }
    tr:hover {
      background-color: #f5f5f5;
    }
    a {
      text-decoration: none;
      color: #333;
      font-weight: bold;
    }
    a:hover {
      text-decoration: underline;
    }
  </style>
</head>

<body>

  <div class="container">
    <h2>数据列表</h2>

    <button onclick="redirectToAddPage()">新增查询</button>

    <table>
      <thead>
        <tr>
          <th>用户名</th>
          <th>用户IP</th>
          <th>查询时间</th>
        </tr>
      </thead>
      <tbody id="dataTable"></tbody>
    </table>
  </div>

  <script>
    const users = [
      { id: 1, username: 'test_user1', host: '127.0.0.1', stime: '2023-09-20T10:00:00', filename: 'test_file1.json' },
      { id: 2, username: 'test_user2', host: '192.168.1.1', stime: '2023-09-20T11:00:00', filename: 'test_file2.json' },
      { id: 3, username: 'test_user3', host: '192.168.1.2', stime: '2023-09-20T12:00:00', filename: 'test_file3.json' },
      { id: 4, username: 'test_user4', host: '192.168.1.3', stime: '2023-09-20T13:00:00', filename: 'test_file4.json' },
      { id: 5, username: 'test_user5', host: '192.168.1.4', stime: '2023-09-20T14:00:00', filename: 'test_file5.json' }
    ];

    function getDataFromDatabase() {
      const dataTable = document.getElementById('dataTable');
      users.forEach(item => {
        const row = document.createElement('tr');
        row.innerHTML = `<td><a href="display-s.html?id=${item.id}">${item.username}</a></td>
                         <td>${item.host}</td>
                         <td>${item.stime}</td>`;
        dataTable.appendChild(row);
      });
    }

    function redirectToAddPage() {
      window.location.href = '/jxjc_submit.html';  // 跳转到 "jxjc_submit.html"
    }

    window.onload = getDataFromDatabase;
  </script>

</body>
</html>
